<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>供应商列表</title>
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/server.js"></script>
	</head>
	<body>
		<div id="div">
			<!--
			供应商列表：
				当供应商下已经添加了账单，该供应商信息不可以删除
			-->
			
			<!-- 查询 -->
			<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
				<el-form-item label="供应商编码">
					<el-input v-model="searchFrom.proCode"></el-input>
				</el-form-item>
				<el-form-item label="供应商名称">
					<el-input v-model="searchFrom.proName"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="doSearch">查询</el-button>
				</el-form-item>
			</el-form>

			<!-- 表格列表 -->
			<template>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index" label="序号" width="50"></el-table-column>
					<el-table-column prop="proCode" label="供应商编码" width="120">
					</el-table-column>
					<el-table-column prop="proName" label="供应商名称" width="180">
					</el-table-column>
					<el-table-column prop="proContact" label="供应商联系人">
					</el-table-column>
					<el-table-column prop="proPhone" label="联系电话">
					</el-table-column>
					<el-table-column prop="proFax" label="传真">
					</el-table-column>
					<el-table-column prop="creationDate" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="220">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleShow(scope.$index, scope.row)">查看</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 分页条 -->
			<div class="block">
				<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange"
					:current-page="pagination.currentPage" 
					:page-sizes="[3, 5, 10]"
					:page-size="pagination.pageSize"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="pagination.total">
				</el-pagination>
			</div>


			<!-- 查看 -->
			<el-dialog title="查看供应商信息" :visible.sync="showFormVisible">
			  <el-form :model="showForm">
					<el-form-item label="供应商编码" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" v-model="showForm.proCode" disabled></el-input>
					</el-form-item>
					<el-form-item label="供应商名称" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" v-model="showForm.proName" disabled></el-input>
					</el-form-item>
					<el-form-item label="供应商详细描述" :label-width="formLabelWidth">
					  <el-input type="textarea" autocomplete="off" v-model="showForm.proDesc" disabled></el-input>
					</el-form-item>
					<el-form-item label="供应商联系人" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" v-model="showForm.proContact" disabled></el-input>
					</el-form-item>
					<el-form-item label="联系电话" :label-width="formLabelWidth">
					  <el-input autocomplete="off" v-model="showForm.proPhone" disabled></el-input>
					</el-form-item>
					<el-form-item label="地址" :label-width="formLabelWidth">
					  <el-input type="textarea" v-model="showForm.proAddress" autocomplete="off" disabled></el-input>
					</el-form-item>
					<el-form-item label="传真" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" v-model="showForm.proFax" disabled></el-input>
					</el-form-item>
					<el-form-item label="创建时间" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" v-model="showForm.creationDate" disabled></el-input>
					</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="showFormVisible = false">取 消</el-button>
			  </div>
			</el-dialog>
			
			<!-- 编辑 -->
			<el-dialog title="编辑供应商信息" :visible.sync="editFormVisible">
			  <el-form :model="editForm" :rules="rules" ref="editForm">
					<el-form-item label="供应商编码" prop="proCode" :label-width="formLabelWidth">
					    <el-input v-model="editForm.proCode" disabled ></el-input>
					</el-form-item>
					<el-form-item label="供应商名称" prop="proName" :label-width="formLabelWidth">
					    <el-input  v-model="editForm.proName"></el-input>
					</el-form-item>
					<el-form-item label="供应商详细描述" prop="proDesc" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="editForm.proDesc"></el-input>
					</el-form-item>
					
					<el-form-item label="供应商联系人" prop="proContact" :label-width="formLabelWidth">
					    <el-input v-model="editForm.proContact"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="proPhone" :label-width="formLabelWidth">
					    <el-input v-model="editForm.proPhone"></el-input>
					</el-form-item>
					<el-form-item label="地址" prop="proAddress" :label-width="formLabelWidth">
					    <el-input type="textarea" v-model="editForm.proAddress"></el-input>
					</el-form-item>
					<el-form-item label="传真" prop="proFax" :label-width="formLabelWidth">
					    <el-input v-model="editForm.proFax"></el-input>
					</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
					<el-button @click="editFormVisible = false">取 消</el-button>
			        <el-button type="primary" @click="doUpdate('editForm')">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el: '#div',
			data: {
				//查询
				searchFrom: {
					proCode:"",
					proName:""
				},
				
				//列表数据
				tableData: [
				],
				
				//分页
				pagination: {
					currentPage: 1,
					pageSize: 3,
					total: 0
				},
				
				//查看
				showFormVisible: false,
				showForm: {
					 //根据实际情况来确定是否需要定义属性
				},
				formLabelWidth: '120px', //设置对话框输入框的宽度
				
				//编辑
				editFormVisible: false,
				editForm:{
					proCode:'BJ_GYS001'
				},
				rules: {
				    proCode: [{
				    	required: true,
				    	message: '请输入供应商编码',
				    	trigger: 'blur'
				    }],
				    proName: [{
				    	required: true,
				    	message: '请输入供应商名称',
				    	trigger: 'blur'
				    }]
				}
			},
			methods: {
				doSearch() {
					//查询时从第一页开始
					this.pagination.currentPage = 1;
					this.doList();
				},
				handleShow(index, row) {
					//显示对话框
					this.showFormVisible = true;
					console.log(index, row);
					//将row对象中的数据取出显示在页面中
					this.showForm = row;
				},
				handleEdit(index, row) {
					//显示对话框
					this.editFormVisible = true;
					console.log(index, row);
					//将row对象中的数据取出显示在页面中
					this.editForm = row;
				},
				doUpdate(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							//发送请求到服务端
							axios.post(
									server_url + "/servlet/provider?method=doUpdate",
									"&id=" + this.editForm.id +
									"&proName=" + this.editForm.proName +
									"&proDesc=" + this.editForm.proDesc +
									"&proContact=" + this.editForm.proContact +
									"&proPhone=" + this.editForm.proPhone +
									"&proAddress=" + this.editForm.proAddress +
									"&proFax=" + this.editForm.proFax
							).then(resp=>{
								if(resp.data.code == "00"){
									//1.给出成功提示
									this.$message.success(resp.data.msg);
									//2.关闭对话框
									this.editFormVisible = false;
									//3.清除页面内容 - 重置
									this.$refs[formName].resetFields();
									//4.列表数据更新
									this.doList();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					});
				},
				handleDelete(index, row) {
					this.$confirm(
						'此操作将永久删除该数据, 是否继续?','提示',
						{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
					}).then(resp => {
						axios.post(
								server_url + "/servlet/provider?method=doDel",
								"&id=" + row.id
						).then(resp=>{
							if(resp.data.code == "00"){
								//提示信息
								this.$message.success(resp.data.msg);
								//将当前页码指定到第一页
								this.pagination.currentPage = 1;
								//重新发送列表请求
								this.doList();
							}else{
								this.$message.error(resp.data.msg);
							}
						}).catch(err=>{
							console.log(err);
						})

					})
					console.log(index, row);
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					this.pagination.currentPage = 1;
					this.pagination.pageSize = val;
					this.doList();
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
					this.pagination.currentPage = val;
					this.doList();
				},
				doList(){
					axios.post(
							server_url + "/servlet/provider?method=doList",
							"&currentPage="+this.pagination.currentPage+
							"&pageSize="+this.pagination.pageSize+
							"&proCode="+this.searchFrom.proCode+
							"&proName="+this.searchFrom.proName
					).then(resp=>{
						console.log(resp);
						if(resp.data.code == "00"){
							//赋值数据集合
							this.tableData = resp.data.data.list;
							//赋值总记录数
							this.pagination.total = resp.data.data.totalCount;
						}
					}).catch(err=>{
						console.log(err);
					})
				}
			},
			mounted: function() {
				this.doList();
			}
		});
	</script>
</html>